<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-14 17:05:18
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-08-21 17:52:03
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\components\screen.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="moreOperate">
    <el-popover
      placement="bottom-end"
      popper-class="moreOperatePopover"
      width="220"
      trigger="click"
      ref="moreOperate"
    >
      <i
        class="el-icon-more"
        style="color: #999; cursor: pointer"
        slot="reference"
      ></i>
      <div class="moreOperateMain">
        <div class="title">任务显示</div>
        <div class="item" @click="handleChoose('1')">
          <span>包含子任务</span
          ><i class="el-icon-check" v-show="defaultCOnfig === '1'"></i>
        </div>
        <div class="item" @click="handleChoose('2')">
          <span>仅母任务</span
          ><i class="el-icon-check" v-show="defaultCOnfig === '2'"></i>
        </div>
        <div class="item" @click="handleChoose('3')">
          <span>仅已开始任务</span
          ><i class="el-icon-check" v-show="defaultCOnfig === '3'"></i>
        </div>
        <div class="item" @click="handleChoose('4')">
          <span>仅未开始任务</span
          ><i class="el-icon-check" v-show="defaultCOnfig === '4'"></i>
        </div>
        <div class="title">排序方式</div>
        <div class="item time" @click="handleChoose('6')">
          <i class="el-icon-arrow-left"></i><span>按创建时间最早</span>
          <div class="timeOpetion" v-show="isTimeSort">
            <div class="item" @click="handleChooseTime('1')">
              <span>按创建时间最近</span
              ><i class="el-icon-check" v-show="timeCOnfig === '1'"></i>
            </div>
            <div class="item" @click="handleChooseTime('2')">
              <span>按创建时间最早</span
              ><i class="el-icon-check" v-show="timeCOnfig === '2'"></i>
            </div>
            <div class="item" @click="handleChooseTime('3')">
              <span>按开始时间最晚</span
              ><i class="el-icon-check" v-show="timeCOnfig === '3'"></i>
            </div>
            <div class="item" @click="handleChooseTime('4')">
              <span>按开始时间最早</span
              ><i class="el-icon-check" v-show="timeCOnfig === '4'"></i>
            </div>
            <div class="item" @click="handleChooseTime('5')">
              <span>按结束时间最晚</span
              ><i class="el-icon-check" v-show="timeCOnfig === '5'"></i>
            </div>
            <div class="item" @click="handleChooseTime('6')">
              <span>按结束时间最早</span
              ><i class="el-icon-check" v-show="timeCOnfig === '6'"></i>
            </div>
            <div class="item" @click="handleChooseTime('7')">
              <span>按修改时间最近</span
              ><i class="el-icon-check" v-show="timeCOnfig === '7'"></i>
            </div>
            <div class="item" @click="handleChooseTime('8')">
              <span>按修改时间最早</span
              ><i class="el-icon-check" v-show="timeCOnfig === '8'"></i>
            </div>
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    getOperateParams: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      defaultCOnfig: "2",
      timeCOnfig: "2",
      isTimeSort: false,
    };
  },
  methods: {
    handleChoose(val) {
      if (["1", "2", "3", "4"].includes(val)) {
        this.defaultCOnfig = val;
      } else if (val === "6") {
        this.isTimeSort = !this.isTimeSort;
      }
      this.getOperateParams({showType:this.defaultCOnfig,orderType:this.timeCOnfig});
    },
    handleChooseTime(val) {
      this.timeCOnfig = val;
      this.isTimeSort = false;
      this.$refs.moreOperate.doClose();
      this.getOperateParams({showType:this.defaultCOnfig,orderType:this.timeCOnfig});
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
<style lang="scss" >
.moreOperatePopover {
  .moreOperateMain {
    .title {
      color: #999;
      padding: 8px;
    }
    .item {
      padding: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }
    .item:hover {
      background: #f5f7fa;
      border-radius: 6px;
    }
    .time {
      justify-content: flex-start;
      position: relative;
    }
    .timeOpetion {
      position: absolute;
      width: 200px;
      height: 300px;
      background: #fff;
      right: 212px;
      top: -120px;
      border-radius: 6px;
      border: 1px solid #e6ebf5;
      color: #606266;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 8px;
    }
  }
}
</style>